<script setup>
import dayjs from "dayjs"; //引入dayjs日期库
import { fetchNowData, fetchAirData, fetchIndicesData } from "@/api/weatherAPI";
import { computed, ref, watch } from "vue";
//引入和风天气图标
import "qweather-icons/font/qweather-icons.css";
//引入状态管理
import { useCityStore } from "../stores/cityStore";

//获取store实例
const cityStore = useCityStore();

// /声明响应式数据
const nowData = ref({}); //对应res中的now函数
const updateTime = ref(""); //对应res中的udpatetime属性
const airData = ref({});
const indicesData = ref({});
//const city = ref('')
//添加侦听器:监听状态管理中location状态的变化
//添加侦听器:监听状态管理中location状态的变化
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数,当数据源有变化时，需要做的事情
  () => {
    getData(cityStore.location.id);
  },
  //即时回调，初始状态执行一个回调函数【请求未来24小时天气预报数据函数】
  { immediate: true }
);
//初始调用getdata
//getData(cityStore.location.id)
//网络请求，获取api数据并进行处理
async function getData(locationID) {
  const res = await fetchNowData(locationID);
  console.log(res);
  nowData.value = res.now;
  updateTime.value = dayjs(res.updateTime).format("YYYY年MM月DD日  HH时mm分"); //保存后端获取的更新时间updatTime

  //updateTime.value = res.updateTime

  const resAir = await fetchAirData(locationID);
  console.log(resAir);
  airData.value = resAir.now;

  //获取紫外线指数的数据
  const resIndices = await fetchIndicesData(locationID, 5);
  console.log(resIndices);
  indicesData.value = resIndices.daily[0];
}
//计算属性
const airText = computed(() => {
  const aqi = airData.value.aqi;
  if (aqi <= 50) {
    return "优";
  } else if (aqi <= 100) {
    return "良";
  } else if (aqi <= 150) {
    return "轻度污染";
  } else if (aqi <= 200) {
    return "中度污染";
  } else if (aqi <= 300) {
    return "重度污染";
  } else if (aqi <= 500) {
    return "严重污染";
  } else {
    return "爆表";
  }
});
</script>

<template>
  <div class="now">
    <div class="top">
      <span>{{ cityStore.location.name }}</span>
      <span>{{ updateTime }}</span>
    </div>
    <div class="mid">
      <div class="air">
        <p>AQI {{ airText }}</p>
      </div>
      <div class="weather">
        <i :class="`qi-${nowData.icon}`"></i>
        <div>
          <p>{{ nowData.temp }}°</p>
          <p>{{ nowData.text }}</p>
        </div>
      </div>
      <div class="text">
        <p>{{ indicesData.text }}</p>
      </div>
    </div>
    <div class="bottom">
      <div>
        <p>{{ nowData.windScale }}级</p>
        <p>{{ nowData.windDir }}</p>
      </div>
      <div>
        <p>{{ nowData.humidity }}</p>
        <p>相对湿度</p>
      </div>
      <div>
        <p>{{ indicesData.category }}</p>
        <p>紫外线</p>
      </div>
      <div>
        <p>{{ nowData.feelsLike }}°</p>
        <p>体感温度</p>
      </div>
      <div>
        <p>{{ nowData.vis }}km</p>
        <p>能见度</p>
      </div>
      <div>
        <p>{{ nowData.precip }}mm</p>
        <p>降水量</p>
      </div>
      <div>
        <p>{{ nowData.pressure }}hPa</p>
        <p>大气压</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.now {
  width: 100%;
  background-color: rgb(172, 249, 247);
  border-radius: 1rem;
  padding: 1rem 0;
}
.now .top {
  padding: 1rem;
  overflow: hidden;
}
.now .top > span:nth-last-of-type(1) {
  float: right;
}
.weather {
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather > i {
  font-size: 3rem;
  margin-right: 1rem;
}
.weather > div > p:nth-of-type(1) {
  font-size: 2rem;
}
.weather > div > p:nth-of-type(2) {
  font-size: 1rem;
}

.text {
  font-size: 10px;
  text-align: center;
}
.bottom {
  width: 90%;
  margin: 0 auto;
  background-color: #daf6ff;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.air {
  padding: 1rem;
}
.air > p {
  text-align: center;
  width: 6rem;
  height: 2rem;
  line-height: 2rem;
  background-color: #c83193;
  border-radius: 1rem;
  color: white;
  float: right;
}
</style>